<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="plus">+</button>
  <span id="count">0</span>
  <button id="minus">-</button>
  <script src="./redux.min.js"></script>
  <script>
    // 3. 存储默认状态
    const initialState = {
      count: 0
    }
    // 2.创建reducer函数
    function reducer(state = initialState, action){
      switch(action.type) {
        case 'increment':
          return { count: state.count + 1}
        case 'decrement':
          return { count: state.count - 1}
        default:
          return state
      }
    }
    // 1.创建store对象
    const store = Redux.createStore(reducer)
    // 4. 定义action
    const increment = { type: 'increment'}
    const decrement = { type: 'decrement'}

    // 5. 获得按钮给按钮绑定点击事件
    document.getElementById('plus').addEventListener('click', () => {
      // 6.触发action
      store.dispatch(increment)
    })
    document.getElementById('minus').addEventListener('click', () => {
      // 6.触发action
      store.dispatch(decrement)
    })
    
    // 7. 订阅store
    store.subscribe(() => {
      document.getElementById('count').innerHTML = store.getState().count
    })
    console.log(store)
    </script>
</body>
</html>